<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>用户管理</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="../../../layuiadmin/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="../../../layuiadmin/style/admin.css" media="all">
</head>

<body>
  <div class="layui-fluid">
    <div class="layui-card">
      <div class="layui-card-body">
        <div style="padding-bottom: 10px">
          <div class="layui-form layui-card-header layuiadmin-card-header-auto">
            <div class="layui-form-item">
              <div class="layui-inline">
                <label class="layui-form-label">搜索框</label>
                <div class="layui-input-block">
                  <input type="text" name="match" placeholder="请输入用户名或站点名" autocomplete="off" class="layui-input"
                    style="width:500px">
                </div>
              </div>
              <div class="layui-inline">
                <label class="layui-form-label">角色</label>
                <div class="layui-input-block">
                  <select id='roleList' name="urid">
                    <option value="">请选择</option>
                  </select>
                </div>
              </div>
              <div class="layui-inline">
                <button class="layui-btn layuiadmin-btn-admin" lay-submit lay-filter="userParamQuery">
                  <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                </button>
              </div>
              <div class='layui-inline' style='float:right'>
                <button class="layui-btn layuiadmin-btn-user" data-type="add">添加</button>
              </div>
            </div>
          </div>
        </div>

        <table id="user-data-form" lay-filter="user-data-form"></table>
        <script type="text/html" id="toolbar">
          <div class="layui-btn-container">
                <button class="layui-btn layui-btn-sm" lay-event="edit">编辑</button>
                <button class="layui-btn layui-btn-sm  layui-btn-danger" lay-event="delete">删除</button>
          </div>
      </script>
      </div>
    </div>
  </div>

  <script src="../../../layuiadmin/layui/layui.js"></script>
  <script>
    layui.config({
      base: '../../../layuiadmin/' //静态资源所在路径
    }).extend({
      index: 'lib/index' //主入口模块
      , my_send: '../myModules/my_send'
    }).use(['index', 'table', 'my_send'], function () {
      var $ = layui.$
        , form = layui.form
        , table = layui.table
        , my_send = layui.my_send
        , http_proxy = layui.http_proxy;

      //搜索角色
      form.on('submit(userParamQuery)', function (data) {
        //执行重载
        table.reload('userTable', {
          where: data.field
        });
      });

      table.render({
        elem: '#user-data-form'
        , id: 'userTable'
        , height: 500
        , url: http_proxy('/user/getUserByParams') //数据接口
        , page: true //开启分页
        , method: 'post'
        , cols: [[ //表头
          { type: 'numbers', title: '序号', width: '5%', fixed: 'left', unresize: true }
          , { field: 'uid', hide: true }
          , { field: 'userName', title: '用户名', width: '26%', align: 'center', unresize: true }
          , { field: 'stationName', title: '站点名', width: '27%', align: 'center', unresize: true }
          // , { field: 'roleName', title: '角色', width: '27%', align: 'center', unresize: true, templet: '<div>{{d.userRoles.roleName}}</div>' }
          , { field: 'rolesNameString', title: '拥有角色', width: '27%', align: 'center', unresize: true }
          , { fixed: 'right', title: '操作', width: '15%', align: 'center', toolbar: '#toolbar', unresize: true }
        ]]
        , response: {
          countName: 'total' //规定数据总数的字段名称，默认：count
          , dataName: 'rows' //规定数据列表的字段名称，默认：data
          , roleName: ''
        }
      });

      //添加
      $('.layui-btn.layuiadmin-btn-user').on('click', function () {
        layer.open({
          type: 2
          , title: '添加新用户'
          , content: 'userform.html'
          , area: ['650px', '710px']
          , btn: ['确定', '取消']
          , yes: function (index, layero) {
            var iframeWindow = window['layui-layer-iframe' + index]
              , submit = layero.find('iframe').contents().find("#user-submit");

            //监听提交
            iframeWindow.layui.form.on('submit(user-submit)', function (data) {
              var field = data.field; //获取提交的字段
              var urid = [];
              $.each(iframeWindow.layui.transfer.getData('selectedRoleList'), function (i, n) {
                urid.push(n.value);
              })

              field.urid = urid;

              my_send({
                url: '/user/addUser'
                , type: 'post'
                , data: field
                , success: function (obj) {
                  table.reload('userTable');
                }
              })
              layer.close(index); //关闭弹层
            });

            submit.trigger('click');
          }
        });
      });

      table.on('tool(user-data-form)', function (obj) {
        var data = obj.data;
        var event = obj.event;

        var uid = data.uid
          , userName = data.userName
          , stationName = data.stationName;

        if (event === 'delete') { //删除
          layer.confirm('真的删除行么', function (index) {
            obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
            layer.close(index);
            //向服务端发送删除指令
            my_send({
              url: '/user/deleteUser'
              , type: 'post'
              , data: {
                'uid': data.uid
              }
              , success: function (obj) {
                table.reload('userTable');
              }
            })
          });
        } else if (event === 'edit') { //编辑
          layer.open({
            type: 2
            , title: '修改权限'
            , content: 'userform.html?uid=' + data.uid
            , area: ['650px', '710px']
            , btn: ['确定', '取消']
            , yes: function (index, layero) {
              var iframeWindow = window['layui-layer-iframe' + index]
                , submit = layero.find('iframe').contents().find("#user-submit");

              //监听提交
              iframeWindow.layui.form.on('submit(user-submit)', function (data) {
                var field = data.field; //获取提交的字段
                var urid = [];
                $.each(iframeWindow.layui.transfer.getData('selectedRoleList'), function (i, n) {
                  urid.push(n.value);
                })

                field.urid = urid;

                my_send({
                  url: '/user/updateUser'
                  , type: 'post'
                  , data: field
                  , success: function (obj) {
                    table.reload('userTable');
                  }
                })
                layer.close(index); //关闭弹层
              });
              submit.trigger('click');
            }
          });
        }
      })

      my_send({
        url: "/role/getRoleByParams"
        , type: 'post'
        , data: {
          page: 1
          , limit: 1000
        }
        , success: function (obj) {
          var roleList = $("#roleList");
          $.each(obj.rows, function (i, n) {
            roleList.append("<option value=" + n.urid + ">" + n.roleName + "</option>")
          })
          form.render('select');
        }
      })
    });
  </script>
</body>

</html>